/* 公共变量 */
body {--primary: #007bff;
	/* 蓝(原色)--主要的*/
	--secondary: #6c757d;
	/* 灰蓝--次要的*/
	--success: #28a745;
	/* 绿色--成功的 */
	--danger: #dc3545;
	/* 深红--危险 */
	--warning: #ffc107;
	/* 黄(原色)--警告*/
	--info: #17a2b8;
	/* 绿松石色--信息*/
	--light: #f8f9fa;
	/* 亮白色*/
	--dark: #343a40;
	/* 暗黑*/
	--muted: #6c757d;
	/* 灰黑*/
	--white: #fff;
	/* 白色*/
	--lightmuted: #b2b2b2;
	/* 浅灰色*/
	--bordercolor: #f1f1f1;
	/* 默认是取 #dee2e6,现在取背景颜色的值 */
	--backgroundcolor: #f6f7f8;}
/* 页面主色 */
/* 主题颜色的应用:在vue页面上引入<view :style="{ '--themescolor': themes.color }">值,只要--themescolor的名字对应上,该themes.color值会传到该公共css里 */
/* --themescolor:var(--themescolor);  */
/* 防止图片闪一下 */
img {will-change: transform;}
/* 指定页面安全距离 */
body {--safe-area-inset-top: 0px;--safe-area-inset-right: 0px;--safe-area-inset-bottom: 0px;--safe-area-inset-left: 0px;}
@supports (top: constant(safe-area-inset-top)) {body {--safe-area-inset-top: constant(safe-area-inset-top);--safe-area-inset-right: constant(safe-area-inset-right);--safe-area-inset-bottom: constant(safe-area-inset-bottom);--safe-area-inset-left: constant(safe-area-inset-left);}
}
@supports (top: env(safe-area-inset-top)) {body {--safe-area-inset-top: env(safe-area-inset-top);--safe-area-inset-right: env(safe-area-inset-right);--safe-area-inset-bottom: env(safe-area-inset-bottom);--safe-area-inset-left: env(safe-area-inset-left);}
}
/* 用法:<view class="det-foot" style="border-bottom: var(--safe-area-inset-bottom) solid #FFFFFF;">
或者:.det-foot { height: calc(50px + var(--safe-area-inset-bottom)); } 
    .detail { padding-bottom: calc(60px + var(--safe-area-inset-bottom)); }*/
.safearea-bb {border-bottom: var(--safe-area-inset-bottom) solid transparent;}
.safearea-bb-white {border-bottom: var(--safe-area-inset-bottom) solid #ffffff;}
.safearea-bb-theme {border-bottom: var(--safe-area-inset-bottom) solid var(--themescolor);}
.safearea-bb-bg {border-bottom: var(--safe-area-inset-bottom) solid var(--backgroundcolor);}
.safearea-bt {border-top: var(--safe-area-inset-top) solid transparent;}
.safearea-bt-white {border-top: var(--safe-area-inset-top) solid #ffffff;}
.safearea-bt-theme {border-top: var(--safe-area-inset-top) solid var(--themescolor);}
.safearea-bt-bg {border-top: var(--safe-area-inset-top) solid var(--backgroundcolor);}
.safearea-pb {padding-bottom: var(--safe-area-inset-bottom) solid transparent;}
.safearea-pb-white {padding-bottom: var(--safe-area-inset-bottom) solid #ffffff;}
.safearea-pb-theme {padding-bottom: var(--safe-area-inset-bottom) solid var(--themescolor);}
.safearea-pb-bg {padding-bottom: var(--safe-area-inset-bottom) solid var(--backgroundcolor);}
.safearea-pt {padding-top: var(--safe-area-inset-top) solid transparent;}
.safearea-pt-white {padding-top: var(--safe-area-inset-top) solid #ffffff;}
.safearea-pt-theme {padding-top: var(--safe-area-inset-top) solid var(--themescolor);}
.safearea-pt-bg {padding-top: var(--safe-area-inset-top) solid var(--backgroundcolor);}
.clearfix {zoom: 1;}
.clearfix:after {content: ' ';display: table;clear: both;}
/* 阴影(备注：只能用px为单位，用rpx无效) */
.shadow-sm {box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
/* 浅色投影 */
.shadow {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);}
/* 基础投影 */
.shadow-lg {box-shadow: 0px 8px 24px rgba(114, 130, 138, 0.8);}
/* 深色投影 */
/* 定位 */
.position-absolute {position: absolute;}
.position-fixed {position: fixed;}
.position-relative {position: relative;}
.position-sticky {position: sticky;}
.left-0 {left: 0;}
.left-100 {left: 100%;}
.top-0 {top: 0;}
.top-44p {top: 44px;}
.top-100 {top: 100%;}
.bottom-0 {bottom: 0;}
.bottom-100 {bottom: 100%;}
.bottom-100p {bottom: 100px;}
.right-0 {right: 0;}
.right-100 {right: 100%;}
/* 宽高 */
.w-100 {width: 100%;}
.w-90 {width: 90%;}
.w-75 {width: 75%;}
.w-50 {width: 50%;}
.w-25 {width: 25%;}
.w-33 {width: 33.33333333%;}
.h-100 {height: 100%;}
.h-75 {height: 75%;}
.h-50 {height: 50%;}
.h-25 {height: 25%;}
/* 新增 */
.w-auto {width: auto;}
.w-0 {width: 0;}
.w-15p {width: 15px;}
.w-16p {width: 16px;}
.w-25p { width: 25px;}
.w-30p {width: 30px;}
.w-44p {width: 44px;}
.w-50p {width: 50px;}
.w-60p {width: 60px;}
.w-70p {width: 70px;}
.w-80p {width: 80px;}
.h-100vh {height: 100vh;}
.h-50vh {height: 50vh;}
.h-33vh {height: 33vh;}
.h-25vh {height: 25vh;}
.w-100vw {width: 100vw;}
.w-50vw {width: 50vw;}
.w-33vw {width: 33vw;}
.w-25vw {width: 25vw;}
.h-auto {height: auto;}
.h-0 {height: 0;}
.h-15p {height: 15px;}
.h-25p {height: 25px;}
.h-28p {height: 28px;}
/* 搜索框的标准高度 */
.h-20p {height: 20px;}
.h-30p {height: 30px;}
.h-40p {height: 40px;}
.h-60p {height: 60px;}
.h-44p {height: 44px;}
.h-48p {height: 48px;}
.h-50p {height: 50px}
.h-70p {height: 70px;}
.h-80p {height: 80px;}
/* 字体 */
.font {font-size: 12px;}
.font-sm {font-size: 10px;}
.font-md {font-size: 15px;}
.font-lg {font-size: 20px;}
.font-big {font-size: 30px;}
.font-weight {font-weight: bold !important;}
.font-weight-100 {font-weight: 100 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-600 {font-weight: 600 !important;}
/* 以下为新增的 */
.font-0 {font-size: 0;}
/* view下的image子元素，image不设高度的话，会不占满父级元素，这时加上font-size: 0;就能把空出的2px空白给填上 */
.font-30 {font-size: 30px !important;}
.font-32 {font-size: 32px !important;}
.font-20 {font-size: 20px !important;}
.font-24 {font-size: 24px !important;}
.font-18 {font-size: 18px !important;}
.font-16 {font-size: 16px !important;}
.font-15 {font-size: 15px !important;}
.font-14 {font-size: 14px !important;}
.font-13 {font-size: 13px !important;}
.font-12 {font-size: 12px !important;}
.font-10 {font-size: 10px !important;}
.word-breakall {word-break: break-all;}
.font-arial {font-family: arial;}
/* 数字专用，数字用这个字体会比默认的好看 */
/* 字距 */
.letter-sp1 {letter-spacing: 1px;}
.letter-sp2 {letter-spacing: 2px;}
.letter-sp5 {letter-spacing: 5px;}
.letter-sp10 {letter-spacing: 10px;}
.line-h0 {line-height: 0 !important;}
.line-h {line-height: 1 !important;}
.line-h-sm {line-height: 1.2 !important;}
.line-h-md {line-height: 1.5 !important;}
.line-h-lg {line-height: 2 !important;}
.line-h-big {line-height: 3 !important;}
.line-through {text-decoration: line-through;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
/* scroll-view */
.scroll-row {width: 100%;white-space: nowrap;}
/* 新增 */
.text-nowrap {white-space: nowrap;word-wrap: normal;}
/* 强制不换行 */
.text-wrap {white-space: normal;word-wrap: break-word;word-break: break-all;}
/* 强制换行(且所有文字是breakall),但遇到一个换行符才会换行(不保留空格) */
.text-pre-line {white-space: pre-line;word-wrap: break-word;word-break: break-all;}
/*自动换行(且所有文字是breakall),遇到一个换行符才会换行 (保留空格，但多个空格合并成一个)*/
.text-pre-wrap {white-space: pre-wrap;word-wrap: break-word;word-break: break-all;}
/*自动换行(且所有文字是breakall),遇到一个换行符才会换行(保留全部空格)  */
.border-box {box-sizing: border-box !important;}
.content-box {box-sizing: content-box !important;}
.row {box-sizing: border-box !important;display: flex !important;flex-direction: row;flex-wrap: wrap;}
/* 横向flex但会换行 */
[class*='col-'],
[class*='span-'],
[class*='span24-'] {min-height: 1px;box-sizing: border-box !important;}
/* 栅栏一 */
.col-1 {width: 30px;}
.col-2 {width: 60px;}
.col-3 {width: 90px;}
.col-4 {width: 110px;}
.col-5 {width: 150px;}
.col-6 {width: 180px;}
.col-7 {width: 210px;}
.col-8 {width: 240px;}
.col-9 {width: 270px;}
.col-10 {width: 300px;}
.col-11 {width: 330px;}
.col-12 {width: 360px;}
/* 栅栏二 */
.span-1 {width: 5%;}
.span-2 {width: 10%;}
.span-3 {width: 15%;}
.span-4 {width: 20%;}
.span-5 {width: 25%;}
.span-6 {width: 30%;}
.span-7 {width: 35%;}
.span-8 {width: 40%;}
.span-9 {width: 45%;}
.span-10 {width: 50%;}
.span-11 {width: 55%;}
.span-12 {width: 60%;}
.span-13 {width: 65%;}
.span-14 {width: 70%;}
.span-15 {width: 75%;}
.span-16 {width: 80%;}
.span-17 {width: 85%;}
.span-18 {width: 90%;}
.span-19 {width: 95%;}
.span-20 {width: 100%;}
/* 栅栏三 */
.span24-1 {width: 4.17%;}
.span24-2 {width: 8.33%;}
.span24-3 {width: 12.5%;}
.span24-4 {width: 16.67%;}
.span24-5 {width: 20.83%;}
.span24-6 {width: 25%;}
.span24-7 {width: 29.17%;}
.span24-8 {width: 33.33%;}
.span24-9 {width: 37.5%;}
.span24-10 {width: 41.67%;}
.span24-11 {width: 45.83%;}
.span24-12 {width: 50%;}
.span24-13 {width: 54.17%;}
.span24-14 {width: 58.33%;}
.span24-15 {width: 62.5%;}
.span24-16 {width: 66.67%;}
.span24-17 {width: 70.83%;}
.span24-18 {width: 75%;}
.span24-19 {width: 79.17%;}
.span24-20 {width: 83.33%;}
.span24-21 {width: 87.5%;}
.span24-22 {width: 91.67%;}
.span24-23 {width: 95.83%;}
.span24-24 {width: 100%;}
/* button按钮 */
.but-pe-none {background: rgba(0, 0, 0, 0.3) !important;color: #fff !important;border: 0 !important;pointer-events: none !important;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
/* 置灰的按钮(不可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.but-pe-none-rgb02 {background: rgba(0, 0, 0, 0.2) !important;color: #fff !important;border: 0 !important;pointer-events: none !important;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
/* 置灰的按钮(不可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.but-main {background: var(--themescolor) !important;color: #fff !important;border: 0 !important;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
/* 置灰的按钮(不可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.but-main-rgb02 {background: var(--themesrgba02) !important;color: var(--themescolor) !important;border: 0 !important;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
/* 置灰的按钮(不可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.pointer-none {pointer-events: none;}
.cursor-pointer {cursor: pointer;}
/* 禁止点击 */
.pointer-auto {pointer-events: auto;}
/* 父元素pointer-none后子元素可以用 pointer-auto这样只能点击子元素*/
/* flex布局 */
.d-flex {display: flex;}
.d-grid {display: grid;}
.d-block {display: block;}
.d-inline-block {display: inline-block;}
.d-contents {display: contents;}
/* 这个类似于inline-block，但contents 使 div 不产生任何框 ，因此不会渲染其背景 边框 和 内边距 ，但颜色 / 字体等继承的属性还是会对其子元素产生效果 */
.flex-0 {flex: 0;}
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}
.flex-4 {flex: 4;}
.flex-5 {flex: 5;}
.flex-8 {flex: 8;}
.flex-column {flex-direction: column;}
.flex-row {flex-direction: row;}
.flex-wrap {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}
.flex-shrink {flex-shrink: 0;}
.j-start {justify-content: flex-start;}
.j-center {justify-content: center;}
.j-end {justify-content: flex-end;}
.j-sb {justify-content: space-between;}
.j-sa {justify-content: space-around;}
.a-center {align-items: center;}
.a-start {align-items: flex-start;}
.a-end {align-items: flex-end;}
.a-baseline {align-items: baseline;}
.a-stretch {align-items: stretch;}
.a-self-start {align-self: flex-start;}
.a-self-auto {align-self: auto;}
.a-self-end {align-self: flex-end;}
.a-self-stretch {align-self: stretch;}
.a-self-baseline {align-self: baseline;}
.a-self-center {align-self: center;}
.a-self-normal {align-self: normal;}
/* 以下为新增 */
/* 垂直对齐方式(可用于任何布局) */
.v-baseline {vertical-align: baseline;}
/* 默认。元素放置在父元素的基线上 */
.v-sub {vertical-align: sub;}
/*垂直对齐文本的下标 */
.v-super {vertical-align: super;}
/* 	垂直对齐文本的上标 */
.v-top {vertical-align: top;}
/* 把元素的顶端与行中最高元素的顶端对齐 */
.v-text-top {vertical-align: text-top;}
/* 把元素的顶端与父元素字体的顶端对齐 */
.v-middle {vertical-align: middle;}
/* 把此元素放置在父元素的中部 */
.v-baseline-middle {vertical-align: -webkit-baseline-middle;}
/* 把此元素放置在父元素的中部 */
.v-bottom {vertical-align: bottom;}
/* 把元素的顶端与行中最低的元素的顶端对齐 */
.v-text-bottom {vertical-align: text-bottom;}
/* 把元素的底端与父元素字体的底端对齐 */
/* flex横向 */
.flex-auto {flex: auto;}
/* 即是:flex:1 1 auto;[第一个是放大值(默认为0，即如果存在剩余空间，也不放大),第二个是缩小值(默认为1，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小),第三个固定值(跟width或height属性一样的值（比如350px），则项目将占据固定空间)] */
.flex-none {flex: none;}
/* 即是:flex:0 0 auto; */
.flex-center {box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
/* X轴(主轴)方向-所有元素居中(包括横向的和垂直方向的) */
.flex-start {box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;}
/* X轴(主轴)方向-所有元素居中(子元素-横向靠左对齐) */
.flex-end {box-sizing: border-box;display: flex;align-items: center;justify-content: flex-end;}
/* X轴(主轴)方向-所有元素垂直方向居中(子元素-横向靠右对齐)*/
.flex-between {box-sizing: border-box;display: flex;align-items: center;justify-content: space-between;}
/* X轴(主轴)方向-所有元素垂直方向居中(两端对齐,子元素之间的间隔都相等。只有一个子元素时是左对齐)*/
.flex-around {box-sizing: border-box;display: flex;align-items: center;justify-content: space-around;}
/* X轴(主轴)方向-所有元素垂直方向居中(每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与边框的间隔大一倍。只有一个子元素时是居中,)*/
/* flex竖向flex-direction: column; */
[class*='flex-col-'] {box-sizing: border-box;display: flex;flex-direction: column;}
.flex-col-center {justify-content: center;align-items: center;}
/* Y轴(主轴)方向-所有元素居中(包括横向的和垂直方向的都居中)*/
.flex-col-start {justify-content: center;align-items: flex-start;}
/* Y轴(主轴)方向-所有元素垂直方向居中(子元素-横向靠左对齐)*/
.flex-col-end {justify-content: center;align-items: flex-end;}
/* Y轴(主轴)方向-所有元素垂直方向居中(子元素-横向靠左对齐)*/
.flex-col-baseline {justify-content: center;align-items: baseline;}
/* Y轴(主轴)方向-所有元素垂直方向居中(X轴-项目的第一行文字的基线对齐)*/
.flex-col-stretch {justify-content: center;align-items: stretch;}
/* Y轴(主轴)方向-所有元素垂直方向居中(X轴-如果项目未设置高度或设为auto，将占满整个容器的高度)*/
.flex-col-between {justify-content: space-between;align-items: flex-start;}
/* Y轴(主轴)方向-所有元素垂直方向两端对齐(子元素-横向靠左对齐)*/
.flex-col-around {justify-content: space-around;align-items: flex-start;}
/* Y轴(主轴)方向-所有元素每个子元素上下之间的间隔相等(子元素-横向靠左对齐)*/
/* grid网格布局 */
.grid-column1 {display: grid;grid-template-columns: repeat(1, 1fr);}
/* grid网格布局,1列,1*/
.grid-column2 {display: grid;grid-template-columns: repeat(2, 1fr);}
/* grid网格布局,2列,1:1*/
.grid-column3 {display: grid;grid-template-columns: repeat(3, 1fr);}
/* grid网格布局,3列,1:1:1*/
.grid-column4 {display: grid;grid-template-columns: repeat(4, 1fr);}
/* grid网格布局,4列,1:1:1:1*/
.grid-column5 {display: grid;grid-template-columns: repeat(5, 1fr);}
/* grid网格布局,5列,1:1:1:1:1*/
.grid-column6 {display: grid;grid-template-columns: repeat(6, 1fr);}
/* grid网格布局,6列,1:1:1:1:1:1*/
.grid-c-10 {grid-column-gap: 10px;}
.grid-c-20 {grid-column-gap: 20px;}
/*每列之间的间距 */
.grid-r-5 {grid-row-gap: 5px;}
.grid-r-10 {grid-row-gap: 10px;}
/*每行之间的间距  */
.grid-rc-10 {grid-column-gap: 10px;grid-row-gap: 10px;}
/*每行及每列之间的间距  */
.grid-gap10 {grid-gap: 10px;}
/*每行及每列之间的间距  */
.grid-gap20 {grid-gap: 20px;}
/*每行及每列之间的间距  */
.grid-c-span2 {grid-column: span 2;}
/*grid里面的元素 占据两列的位置 */
.grid-c-span3 {grid-column: span 3;}
/*grid里面的元素 占据三列的位置 */
.grid-c-span4 {grid-column: span 4;}
/*grid里面的元素 占据四列的位置 */
.grid-c-span5 {grid-column: span 5;}
/*grid里面的元素 占据五列的位置 */
.grid-r-span2 {grid-row: span 2;}
/*grid里面的元素 占据两行的位置 */
.grid-r-span3 {grid-row: span 3;}
/*grid里面的元素 占据两行的位置 */
.grid-r-span4 {grid-row: span 4;}
/*grid里面的元素 占据两行的位置 */
.grid-r-span5 {grid-row: span 5;}
/*grid里面的元素 占据两行的位置 */
.j-item-center {justify-items: center;}
.j-item-start {justify-items: start;}
.j-item-end {justify-items: end;}
.j-item-stretch {justify-items: stretch;}
/* 浮动 与flex不兼容*/
.float-left {float: left;}
.float-right {float: right;}
/* Border */
.border {border: 1px solid var(--bordercolor);}
/* 四边框有波打线-2rpx宽/--bordercolor色 */
.border-transparent {border: 1px solid transparent !important;}
.border-e4 {border: 1px solid #e4e4e4;}
.border-top {border-top: 1px solid var(--bordercolor);}
/* 上边框波打线-2rpx宽、--bordercolor色 */
.border-right {border-right: 1px solid var(--bordercolor);}
/* 右边框波打线-2rpx宽、--bordercolor色 */
.border-bottom {border-bottom: 1px solid var(--bordercolor);}
/* 下边框波打线-2rpx宽、--bordercolor色 */
.border-left {border-left: 1px solid var(--bordercolor);}
/* 左边框波打线-2rpx宽、--bordercolor色 */
.border-dotted {border: 1px dotted var(--bordercolor);}
/* dotted:点状 */
.border-dotted-b {border-bottom: 1px dotted var(--bordercolor);}
/* dotted:点状 */
.border-dotted-ddd {border-bottom: 1px dotted #ddd;}
/* dotted:点状 */
.border-dashed {border: 1px dashed var(--bordercolor);}
/* dashed:虚线 */
.border-dashed-ddd {border-bottom: 1px dashed #ddd;}
/* dashed:虚线 */
/* 新增 */
.border-top-10bg {border-top: 10px solid var(--backgroundcolor);}
/* 上边框波打线-20rpx宽、背景色 */
.border-bottom-10bg {border-bottom: 10px solid var(--backgroundcolor);}
/* 下边框波打线-20rpx宽、背景色 */
.border-main {border: 1px solid var(--themescolor);}
/* 四边框波打线-2rpx宽、主题颜色 */
.border-t-main {border-top: 1px solid var(--themescolor);}
/* 上边框波打线-2rpx宽、主题颜色 */
.border-r-main {border-right: 1px solid var(--themescolor);}
/* 右边框波打线-2rpx宽、主题颜色 */
.border-b-main {border-bottom: 1px solid var(--themescolor);}
/* 下边框波打线-2rpx宽、主题颜色 */
.border-l-main {border-left: 1px solid var(--themescolor);}
/* 左边框波打线-2rpx宽、主题颜色 */
.border-0 {border-width: 0;}
.border-top-0 {border-top-width: 0;}
.border-right-0 {border-right-width: 0;}
.border-bottom-0 {border-bottom-width: 0;}
.border-left-0 {border-left-width: 0;}
.border-primary {border-color: var(--primary) !important;}
.border-secondary {border-color: var(--secondary) !important;}
.border-success {border-color: var(--success) !important;}
.border-danger {border-color: var(--danger) !important;}
.border-warning {border-color: var(--warning) !important;}
.border-info {border-color: var(--info) !important;}
.border-light {border-color: var(--light) !important;}
.border-dark {border-color: var(--dark) !important;}
.border-white {border-color: var(--white) !important;}
.border-light-secondary {border-color: #f1f1f1 !important;}
.border-c-main {border-color: var(--themescolor) !important;}
/* 新增 */
.border-themescolor {border-color: var(--themescolor) !important;}
.border-c-f8 {border-color: #f8f8f8 !important;}
.border-c-e4 {border-color: #e4e4e4 !important;}
.border-c-fff-05 {border-color: rgba(255, 255, 255, 0.5) !important;}
.border-c-999 {border-color: #999 !important;}
.border-ccc {border-color: #cccccc !important;}
.rounded {border-radius: 2px;}
.rounded-circle {border-radius: 100%;}
.rounded-0 {border-radius: 0;}
/* 新增 */
.rounded-2 {border-radius: 2px;}
.rounded-3 {border-radius: 3px;}
.rounded-4 {border-radius: 4px;}
.rounded-5 {border-radius: 5px;}
.rounded-6 {border-radius: 6px;}
.rounded-8 {border-radius: 8px;}
.rounded-10 {border-radius: 10px;}
.rounded-12 {border-radius: 12px;}
.rounded-13 {border-radius: 13px;}
.rounded-15 {border-radius: 15px;}
.rounded-14 {border-radius: 14px;}
.rounded-20 {border-radius: 20px;}
.rounded-22 {border-radius: 22px;}
.rounded-25 {border-radius: 25px;}
.rounded-30 {border-radius: 30px;}
.rounded-50 {border-radius: 50px;}
.rounded-100 {border-radius: 100px;}
/* color */
.text-primary {color: var(--primary) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-success {color: var(--success) !important;}
.text-danger {color: var(--danger) !important;}
.text-warning {color: var(--warning) !important;}
.text-info {color: var(--info) !important;}
.text-light {color: var(--light) !important;}
.text-dark {color: var(--dark) !important;}
.text-muted {color: var(--muted) !important;}
.text-light-muted {color: var(--lightmuted) !important;}
.text-white {color: var(--white) !important;}
/* 新增的灰色 */
.text-333 {color: #333333 !important;}
.text-555 {color: #555555 !important;}
.text-666 {color: #666666 !important;}
.text-999 {color: #999999 !important;}
.text-bbb {color: #bbbbbb !important;}
.text-ccc {color: #cccccc !important;}
.text-ddd {color: #dddddd !important;}
.text-eee {color: #eeeeee !important;}
.text-fff {color: #ffffff !important;}
.text-000 {color: #000000 !important;}
.text-main {color: var(--themescolor) !important;}
.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-success {background-color: var(--success) !important;}
.bg-danger {background-color: var(--danger) !important;}
.bg-warning {background-color: var(--warning) !important;}
.bg-info {background-color: var(--info) !important;}
.bg-light {background-color: var(--light) !important;}
.bg-dark {background-color: var(--dark) !important;}
.bg-white {background-color: var(--white) !important;}
.bg-light-secondary {background-color: #f1f1f1 !important;}
/* 新增 */
.bg-bg {background-color: var(--backgroundcolor) !important;}
.bg-333 {background-color: #333333 !important;}
.bg-555 {background-color: #555555 !important;}
.bg-666 {background-color: #666666 !important;}
.bg-999 {background-color: #999999 !important;}
.bg-f8 {background-color: #f8f8f8 !important;}
.bg-f5 {background-color: #f5f5f5 !important;}
.bg-aaa {background-color: #aaaaaa !important;}
.bg-bbb {background-color: #bbbbbb !important;}
.bg-ccc {background-color: #cccccc !important;}
.bg-ddd {background-color: #dddddd !important;}
.bg-eee {background-color: #eeeeee !important;}
.bg-fff {background-color: #ffffff !important;}
.bg-f7 {background-color: #f2f2f7 !important;}
.bg-000 {background-color: #000 !important;}
.bg-fa {background-color: #fafafa !important;}
.bg-e4 {background-color: #e4e4e4 !important;}
.bg-e0 {background-color: #E02020 !important;}
.bg-main {background-color: var(--themescolor) !important;}
.bg-transparent {background: transparent !important;}
.bg-black-5 {background-color: rgba(0, 0, 0, 0.5) !important;}
.bg-white-95 {background-color: rgba(255, 255, 255, 0.95) !important;}
/* 透明度 */
.opacity-0 {opacity: 0;}
.opacity-2 {opacity: 0.2;}
.opacity-4 {opacity: 0.4;}
.opacity-5 {opacity: 0.5;}
.opacity-6 {opacity: 0.6;}
.opacity-7 {opacity: 0.7;}
.opacity-8 {opacity: 0.8;}
.opacity-10 {opacity: 1;}
/* Spacing */
.m-0 {margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}
.m {margin-left: 5px;margin-right: 5px;margin-top: 5px;margin-bottom: 5px;}
.m-1 {margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;}
.m-2 {margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;}
.m-3 {margin-left: 30px;margin-right: 7.3px;margin-top: 30px;margin-bottom: 30px;}
.m-4 {margin-left: 40px;margin-right: 40px;margin-top: 40px;margin-bottom: 40px;}
.m-5 {margin-left: 50px;margin-right: 50px;margin-top: 50px;margin-bottom: 50px;}
.m-6 {margin-left: 60px;margin-right: 60px;margin-top: 60px;margin-bottom: 60px;}
.m-7 {margin-left: 70px;margin-right: 70px;margin-top: 70px;margin-bottom: 70px;}
.m-8 {margin-left: 80px;margin-right: 80px;margin-top: 80px;margin-bottom: 80px;}
.m-9 {margin-left: 90px;margin-right: 90px;margin-top: 90px;margin-bottom: 90px;}
.m-10 {margin-left: 100px;margin-right: 100px;margin-top: 100px;margin-bottom: 100px;}
/* 新增 */
.m-auto {margin: auto;}
.m-0-auto {margin: 0 auto;}
/*水平居中 */
.mx-0 {margin-left: 0;margin-right: 0;}
.mx {margin-left: 5px;margin-right: 5px;}
.mx-1 {margin-left: 10px;margin-right: 10px;}
.mx-2 {margin-left: 20px;margin-right: 20px;}
.mx-25p {margin-left: 25px;margin-right: 25px;}
.mx-3 {margin-left: 30px;margin-right: 30px;}
.mx-4 {margin-left: 40px;margin-right: 40px;}
.mx-5 {margin-left: 50px;margin-right: 50px;}
.mx-6 {margin-left: 60px;margin-right: 60px;}
.mx-7 {margin-left: 70px;margin-right: 70px;}
.mx-8 {margin-left: 80px;margin-right: 80px;}
.mx-9 {margin-left: 90px;margin-right: 90px;}
.mx-10 {margin-left: 100px;margin-right: 100px;}
.my-0 {margin-top: 0;margin-bottom: 0;}
.my-1 {margin-top: 10px;margin-bottom: 10px;}
.my-15p {margin-top: 15px;margin-bottom: 15px;}
.my-2 {margin-top: 20px;margin-bottom: 20px;}
.my-3 {margin-top: 30px;margin-bottom: 30px;}
.my-4 {margin-top: 40px;margin-bottom: 40px;}
.my-5 {margin-top: 50px;margin-bottom: 50px;}
.my-6 {margin-top: 60px;margin-bottom: 60px;}
.my-7 {margin-top: 70px;margin-bottom: 70px;}
.my-8 {margin-top: 80px;margin-bottom: 80px;}
.my-9 {margin-top: 90px;margin-bottom: 90px;}
.my-10 {margin-top: 100px;margin-bottom: 100px;}
.mt-0 {margin-top: 0;}
.mt-01 {margin-top: 1px;}
.mt-02 {margin-top: 2px;}
.mt-04 {margin-top: 4px;}
.mt {margin-top: 5px;}
.mt-auto {margin-top: auto;}
.mt-1 {margin-top: 10px;}
.mt-12p {margin-top: 12px;}
.mt-15p {margin-top: 15px;}
.mt-2 {margin-top: 20px;}
.mt-3 {margin-top: 30px;}
.mt-4 {margin-top: 40px;}
.mt-5 {margin-top: 50px;}
.mt-6 {margin-top: 60px;}
.mt-7 {margin-top: 70px;}
.mt-8 {margin-top: 80px;}
.mt-9 {margin-top: 90px;}
.mt-10 {margin-top: 100px;}
.mb-0 {margin-bottom: 0;}
.mb {margin-bottom: 5px;}
.mb-auto {margin-bottom: auto;}
.mb-1 {margin-bottom: 10px;}
.mb-15p {margin-bottom: 15px;}
.mb-2 {margin-bottom: 20px;}
.mb-3 {margin-bottom: 30px;}
.mb-4 {margin-bottom: 40px;}
.mb-5 {margin-bottom: 50px;}
.mb-6 {margin-bottom: 60px;}
.mb-7 {margin-bottom: 70px;}
.mb-8 {margin-bottom: 80px;}
.mb-9 {margin-bottom: 90px;}
.mb-10 {margin-bottom: 100px;}
.ml-0 {margin-left: 0;}
.ml {margin-left: 5px;}
.ml-03 {margin-left: 3px;}
.ml-7p {margin-left: 7px;}
.ml-auto {margin-left: auto;}
.ml-1 {margin-left: 10px;}
.ml-15p {margin-left: 15px;}
.ml-2 {margin-left: 20px;}
.ml-3 {margin-left: 30px;}
.ml-4 {margin-left: 40px;}
.ml-5 {margin-left: 50px;}
.ml-6 {margin-left: 60px;}
.ml-7 {margin-left: 70px;}
.ml-8 {margin-left: 80px;}
.ml-9 {margin-left: 90px;}
.ml-10 {margin-left: 100px;}
.mr-0 {margin-right: 0;}
.mr {margin-right: 5px;}
.mr-05p {margin-right: 5px;}
.mr-03p {margin-right: 3px;}
.mr-1 {margin-right: 10px;}
.mr-15p {margin-right: 15px;}
.mr-2 {margin-right: 20px;}
.mr-3 {margin-right: 30px;}
.mr-4 {margin-right: 40px;}
.mr-5 {margin-right: 50px;}
.mr-6 {margin-right: 60px;}
.mr-7 {margin-right: 70px;}
.mr-8 {margin-right: 80px;}
.mr-9 {margin-right: 90px;}
.mr-10 {margin-right: 100px;}
.p-0 {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}
.p {padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;}
.p-1 {padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;}
.p-15p {padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;}
.p-2 {padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}
.p-3 {padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;}
.p-4 {padding-left: 40px;padding-right: 40px;padding-top: 40px;padding-bottom: 40px;}
.p-5 {padding-left: 50px;padding-right: 50px;padding-top: 50px;padding-bottom: 50px;}
.p-6 {padding-left: 60px;padding-right: 60px;padding-top: 60px;padding-bottom: 60px;}
.p-7 {padding-left: 70px;padding-right: 70px;padding-top: 70px;padding-bottom: 70px;}
.p-8 {padding-left: 80px;padding-right: 80px;padding-top: 80px;padding-bottom: 80px;}
.p-9 {padding-left: 90px;padding-right: 90px;padding-top: 90px;padding-bottom: 90px;}
.p-10 {padding-left: 100px;padding-right: 100px;padding-top: 100px;padding-bottom: 100px;}
.px-0 {padding-left: 0;padding-right: 0;}
.px {padding-left: 5px;padding-right: 5px;}
.px-03p {padding-left: 3px;padding-right: 3px;}
.px-05p {padding-left: 5px;padding-right: 5px;}
.px-07p {padding-left: 7px;padding-right: 7px;}
.px-1 {padding-left: 10px;padding-right: 10px;}
.px-15p {padding-left: 15px;padding-right: 15px;}
.px-2 {padding-left: 20px;padding-right: 20px;}
.px-3 {padding-left: 30px;padding-right: 30px;}
.px-4 {padding-left: 40px;padding-right: 40px;}
.px-5 {padding-left: 50px;padding-right: 50px;}
.px-6 {padding-left: 60px;padding-right: 60px;}
.px-7 {padding-left: 70px;padding-right: 70px;}
.px-8 {padding-left: 80px;padding-right: 80px;}
.px-9 {padding-left: 90px;padding-right: 90px;}
.px-10 {padding-left: 100px;padding-right: 100px;}
.py-0 {padding-top: 0;padding-bottom: 0;}
.py {padding-top: 5px;padding-bottom: 5px;}
.py-03p {padding-top: 3px;padding-bottom: 3px;}
.py-05p {padding-top: 5px;padding-bottom: 5px;}
.py-07p {padding-top: 7px;padding-bottom: 7px;}
.py-1 {padding-top: 10px;padding-bottom: 10px;}
.py-15p {padding-top: 15px;padding-bottom: 15px;}
.py-2 {padding-top: 20px;padding-bottom: 20px;}
.py-3 {padding-top: 30px;padding-bottom: 30px;}
.py-4 {padding-top: 40px;padding-bottom: 40px;}
.py-5 {padding-top: 50px;padding-bottom: 50px;}
.py-6 {padding-top: 60px;padding-bottom: 60px;}
.py-7 {padding-top: 70px;padding-bottom: 70px;}
.py-8 {padding-top: 80px;padding-bottom: 80px;}
.py-9 {padding-top: 90px;padding-bottom: 90px;}
.py-10 {padding-top: 100px;padding-bottom: 100px;}
.pt-0 {padding-top: 0;}
.pt {padding-top: 5px;}
.pt-1 {padding-top: 10px;}
.pt-2 {padding-top: 20px;}
.pt-3 {padding-top: 30px;}
.pt-4 {padding-top: 40px;}
.pt-5 {padding-top: 50px;}
.pt-6 {padding-top: 60px;}
.pt-7 {padding-top: 70px;}
.pt-8 {padding-top: 80px;}
.pt-9 {padding-top: 90px;}
.pt-10 {padding-top: 100px;}
.pb-0 {padding-bottom: 0;}
.pb {padding-bottom: 5px;}
.pb-1 {padding-bottom: 10px;}
.pb-05p {padding-bottom: 5px;}
.pb-15p {padding-bottom: 15px;}
.pb-2 {padding-bottom: 20px;}
.pb-3 {padding-bottom: 30px;}
.pb-4 {padding-bottom: 40px;}
.pb-5 {padding-bottom: 50px;}
.pb-6 {padding-bottom: 60px;}
.pb-7 {padding-bottom: 70px;}
.pb-8 {padding-bottom: 80px;}
.pb-9 {padding-bottom: 90px;}
.pb-10 {padding-bottom: 100px;}
.pb-150 {padding-bottom: 150px;}
.pb-100pre {padding-bottom: 100%;}
/* 指定图片正方形用 */
.pl-0 {padding-left: 0;}
.pl {padding-left: 5px;}
.pl-1 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-2 {padding-left: 20px;}
.pl-3 {padding-left: 30px;}
.pl-34 {padding-left: 34px;}
.pl-4 {padding-left: 40px;}
.pl-5 {padding-left: 50px;}
.pl-6 {padding-left: 60px;}
.pl-7 {padding-left: 70px;}
.pl-8 {padding-left: 80px;}
.pl-9 {padding-left: 90px;}
.pl-10 {padding-left: 100px;}
.pr-0 {padding-right: 0;}
.pr {padding-right: 5px;}
.pr-1 {padding-right: 10px;}
.pr-15 {padding-right: 15px;}
.pr-2 {padding-right: 20px;}
.pr-3 {padding-right: 30px;}
.pr-4 {padding-right: 40px;}
.pr-5 {padding-right: 50px;}
.pr-6 {padding-right: 60px;}
.pr-7 {padding-right: 70px;}
.pr-8 {padding-right: 80px;}
.pr-9 {padding-right: 90px;}
.pr-10 {padding-right: 100px;}
/* 新增 */
.zindex-1 {z-index: 1 !important;}
.zindex-2 {z-index: 2 !important;}
.zindex-99 {z-index: 99 !important;}
.zindex-109 {z-index: 109 !important;}
.zindex-999 {z-index: 999 !important;}
.zindex-9999 {z-index: 9999 !important;}
/* 新增 */
.overflow-h {overflow: hidden;}
.overflow-x {overflow-x: auto;}
.overflow-x-h {overflow-x: hidden;}
.overflow-x-scroll {overflow-x: scroll;}
.overflow-y {overflow-y: auto;}
.overflow-y-h {overflow-y: hidden;}
.overflow-y-scroll {overflow-y: scroll;}
.overflow-scroll {overflow: scroll;}
.overflow-auto {overflow: auto;}
.overflow-visible {overflow: visible;}
/* 隐藏滚动条 */
.scroll-hidden::-webkit-scrollbar {display: none;
	/* Chrome Safari */
	-ms-overflow-style: none;
	/* IE 10+ */
	overflow: -moz-scrollbars-none;
	/* Firefox */
}
/* 防文字溢出*/
[class*='line-clamp'] {text-overflow: ellipsis;overflow: hidden;}
/* 作用：限制只显示1行,超出部分以...显示*/
/* .line-clamp1 {display: -webkit-inline-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;} */
.line-clamp1 {display: inline-block;width: 100%;white-space: nowrap;}
/* 作用：限制只显示1行,超出部分以...显示,备注:不能用-webkit-line-clamp:1(因为这样当出现...时行距会发生变化) */
.line-clamp2 {display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;}
/* 作用：限制只显示2行,超出部分以...显示*/
.line-clamp3 {display: -webkit-inline-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;}
/* 作用：限制只显示3行,超出部分以...显示*/
.line-clamp4 {display: -webkit-inline-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;}
/* 限制只显示4行,超出部分以...显示 */
.line-clamp5 {display: -webkit-inline-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;}
/* 限制只显示5行,超出部分以...显示 */
/* 在父组件不是flex布局的情况下●子●元素水平居(屏幕)中--备注:父组件必须是class="position-relative"或者父组件是body*/
.center-x {position: absolute;left: 50%;transform: translate(-50%, 0);}
/* 在父组件不是flex布局的情况下●子●元素垂直居(屏幕)中--备注:父组件必须是class="position-relative"或者父组件是body*/
.center-y {position: absolute;top: 50%;transform: translate(0, -50%);}
/* 在父组件不是flex布局的情况下●子●元素水平及垂直居(屏幕)中--备注:父组件必须是class="position-relative"或者父组件是body */
.center-xy {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
/* 线性渐变 */
.l-gradient-l {background-image: linear-gradient(to right, var(--themescolor), var(--gradientColor));}
/* 从左到右线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-lt {background-image: linear-gradient(to right bottom, var(--themescolor), var(--gradientColor));}
/* 从左上到右下线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-lb {background-image: linear-gradient(to right top, var(--themescolor), var(--gradientColor));}
/* 从左下到右上线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-r {background-image: linear-gradient(to left, var(--themescolor), var(--gradientColor));}
/* 从右到左线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-rt {background-image: linear-gradient(to left bottom, var(--themescolor), var(--gradientColor));}
/* 从右上到左下线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-rb {background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(var(--themescolor)), to(var(--gradientColor)));background-image: -webkit-linear-gradient(to left top, var(--themescolor), var(--gradientColor));background-image: -moz-linear-gradient(to left top, var(--themescolor), var(--gradientColor));background-image: -o-linear-gradient(to left top, var(--themescolor), var(--gradientColor));background-image: linear-gradient(to left top, var(--themescolor), var(--gradientColor));}
/* 从右下到左上线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-t {background-image: linear-gradient(to bottom, var(--themescolor), var(--gradientColor));}
/* 从上到下线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-b {background-image: linear-gradient(to top, var(--themescolor), var(--gradientColor));}
/* 从下到上线性主题色渐变,从1透明度过渡到0.2透明度 */
.l-gradient-l1007 {background-image: linear-gradient(to right, var(--themescolor), var(--themesrgba07));}
/* 从左到右线性主题色渐变,从1透明度过渡到0.7透明度 */
.l-gradient-l1005 {background-image: linear-gradient(to right, var(--themescolor), var(--themesrgba05));}
/* 从左到右线性主题色渐变,从1透明度过渡到0.5透明度 */
/* 径向渐变 */
.r-gradient-1002 {background-image: Radial-gradient(ellipse, var(--themescolor), var(--gradientColor));}
/* 从中心向外发散椭圆形(默认值是ellipse椭圆形)径向主题色渐变,从1透明度变成0.2透明度 */
.r-gradient-0210 {background-image: Radial-gradient(ellipse, var(--gradientColor), var(--themescolor));}
/* 从中心向外发散椭圆形(默认值是ellipse椭圆形)径向主题色渐变,从0.2透明度变成1透明度 */
.r-gradient-c1002 {background-image: Radial-gradient(circle, var(--themescolor), var(--gradientColor));}
/* 从中心向外发散圆心径向主题色渐变,从1透明度变成0.2透明度 */
.r-gradient-c0210 {background-image: Radial-gradient(circle, var(--gradientColor), var(--themescolor));}
/* 从中心向外发散圆心径向主题色渐变,从0.2透明度变成1透明度 */
/* 动画 */
.translate3d0 {transform: translate3d(0, 0, 0);}
/* position:fiexd;时的防抖 */
.translateX120 {transition: all 1.5s;transform: translateX(120%);}
.translateX150 {transition: all 1.5s;transform: translateX(150%);}
.translateX0 {transition: all 1.5s;transform: translateX(0%);}
.transition-all05 {transition: all 0.5s;}
.transition-all10 {transition: all 1s;}
.transition-all15 {transition: all 1.5s;}
.zoom-out0002 {animation: zoom-out0005 0.2s linear;}
@keyframes zoom-out0005 {0% {transform: scale(0);}
	100% {transform: scale(1);}
}
/* 缩小从0放大到1，动画时间0.2秒 */
.zoom-out0005 {animation: zoom-out0005 0.5s linear;}
@keyframes zoom-out0005 {0% {transform: scale(0);}
	100% {transform: scale(1);}
}
/* 缩小从0放大到1，动画时间0.5秒 */
.zoom-out0010 {animation: zoom-out0010 1s linear;}
@keyframes zoom-out0010 {0% {transform: scale(0);}
	100% {transform: scale(1);}
}
/* 缩小从0放大到1，动画时间1秒 */
.zoom-out0910 {animation: zoom-out0910 1s linear;}
@keyframes zoom-out0910 {0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}
/* 缩小从0.9放大到1，动画时间1秒 */
.zoom-in1110 {animation: zoom-in1110 1s linear;}
@keyframes zoom-in1110 {0% {transform: scale(1.1);}
	100% {transform: scale(1);}
}
/* 缩小从1.1缩小到1，动画时间1秒 */
.zoom-in-out0910 {animation: zoom-in-out0910 1s linear;}
@keyframes zoom-in-out0910 {0% {transform: scale(1);}
	50% {transform: scale(0.9);}
	100% {transform: scale(1);}
}
/* 缩小0.9倍后再还原，动画时间1秒 */
.zoom-in-out1110 {animation: zoom-in-out1110 1s linear;}
@keyframes zoom-in-out1110 {0% {transform: scale(1);}
	50% {transform: scale(1.1);}
	100% {transform: scale(1);}
}
/* 放大1.1倍后再还原，动画时间1秒 */
.zoom-in-out1210 {animation: zoom-in-out1210 1s linear;}
@keyframes zoom-in-out1210 {0% {transform: scale(1);}
	50% {transform: scale(1.2);}
	100% {transform: scale(1);}
}
/* 放大1.2倍后再还原，动画时间1秒 */
.zoom-in-out1215 {animation: zoom-in-out1215 1.5s linear;}
@keyframes zoom-in-out1215 {0% {transform: scale(1);}
	50% {transform: scale(1.2);}
	100% {transform: scale(1);}
}
/* 放大1.2倍后再还原，动画时间1.5秒 */
.zoom-in-out1510 {animation: zoom-in-out1510 1s linear;}
@keyframes zoom-in-out1510 {0% {transform: scale(1);}
	50% {transform: scale(1.5);}
	100% {transform: scale(1);}
}
/* 放大1.5倍后再还原，动画时间1秒 */
.zoom-in-out2010 {animation: zoom-in-out2010 1s linear;}
@keyframes zoom-in-out2010 {0% {transform: scale(1);}
	50% {transform: scale(2);}
	100% {transform: scale(1);}
}
/* 放大2倍后再还原，动画时间1秒 */
.scale-07 {transform: scale(0.7);}
.scale-08 {transform: scale(0.8);}
/* 辅助 */
[class*='mask-percent'] {position: fixed;width: 100%;height: 100%;left: 0;background: rgba(0, 0, 0, 0.65);z-index: 999;}
.mask-percent-s {top: 0;}
/* popup等插件要用到的黑色透明容器(子元素能设定高度百分比,但只能放在HTML的最外层父级元素里),show时的状态(top: 0;)*/
.mask-percent-h {top: 100%;}
/* popup hidden时的状态(top: 100%;)*/
[class*='mask-wrapper'] {position: fixed;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.4);z-index: 999;}
.mask-wrapper-s {top: 0;}
/* popup等插件要用到的黑色透明容器(子元素不能设定高度百分比,只能用rem或rpx来定义子元素的高度,但可以放在HTML任意层级元素里),show时的状态(top: 0;) */
.mask-wrapper-h {top: 100%;}
/* popup hidden时的状态(top: 100%;)*/
.bg-cover {background-size: cover;background-repeat: no-repeat;background-position: center center;}
/* 背景图自适应(拉伸-图像完全覆盖背景区域) */
.bg-cover-all {background-size: 100% 100%;background-repeat: no-repeat;background-position: center center;}
/* 背景图自适应(平铺) */
/* img图片裁剪 */
.object-contain {object-fit: contain}
.object-cover {object-fit: cover}
